<template>
  <view class="user flex-1 pb-[50rpx]">
    <view class="pt-[50rpx] userTop">
      <view class="flex flex-row justify-between px-[30rpx] py-[30rpx]" v-if="theUserInfo">
        <view class="flex flex-row items-center" @click="navTo('/packages/pages/user/setting')">
          <view class="avatar bg-white rounded-[50%] px-[5rpx] py-[5rpx]">
            <u-image shape="circle" :src="theUserInfo.avatar" width="130rpx" height="130rpx"></u-image>
            <u-image class="xbImg"
              :src="theUserInfo.sex == '男' ? `${$domain}/static/icons/user/userCenter/nan.png` : `${$domain}/static/icons/user/userCenter/nv.png`"
              width="34rpx" height="34rpx"></u-image>
          </view>
          <view class="ml-[20rpx]">
            <view class="flex flex-row items-center">
              <view class="font-bold">{{ theUserInfo.nickname }}</view>
              <view @click.stop="navTo('/packages/pages/user/integrity-certification')"
                :style="{ border: `solid 1px ${$theme.primaryColor}` }"
                class="flex flex-row items-center rounded-[40px] px-[10rpx] ml-[10rpx]">
                <u-image :src="`${$domain}/static/icons/user/wrz.svg`" width="30rpx" height="30rpx"></u-image>
                <view style="font-size: 18rpx" :style="{ color: `${$theme.primaryColor}` }"
                  v-if="theUserInfo.auth_status == 3">已认证</view>
                <view style="font-size: 18rpx" :style="{ color: `${$theme.primaryColor}` }" v-else>未认证，立即认证</view>
              </view>
            </view>
            <view class="text-xs font-bold mt-[10rpx]">ID：{{ theUserInfo.sn }}</view>
            <!-- <view class="flex flex-row items-center text-content" style="font-size: 22rpx;">
              {{ theUserInfo.age ? theUserInfo.age + '岁 | ' : '' }} {{ theUserInfo.height ? theUserInfo.height + 'cm | '
                :
                '' }} {{ theUserInfo.education || '' }}
              <view v-if="theUserInfo.age">{{ theUserInfo.age }}岁</view>
              <view class="border-l-2 border-light border-solid border-0 ml-[10rpx] pl-[10rpx]"
                v-if="theUserInfo.height">{{ theUserInfo.height }}cm</view>
              <view class="border-l-2 border-light border-solid border-0 ml-[10rpx] pl-[10rpx]">{{ theUserInfo.education
                }}</view>
            </view> -->
          </view>
        </view>
        <view class="flex flex-row items-center self-start mt-[30rpx]">
          <!-- <u-image @click="navTo('/pages/customer_service/customer_service')"
          :src="`${$domain}/static/icons/user/lxkf.svg`" width="40rpx" height="40rpx" mode="widthFix"></u-image> -->
          <u-image @click="navTo('/packages/pages/user/setting')" class="ml-[20rpx]"
            :src="`${$domain}/static/icons/user/shezhi.svg`" width="40rpx" height="40rpx" mode="widthFix"></u-image>
        </view>
      </view>
      <view class="flex flex-row justify-between px-[30rpx] py-[30rpx]" v-else @click="navTo('/pages/login/login')">
        <view class="flex flex-row items-center">
          <view class="bg-white rounded-[50%] px-[5rpx] py-[5rpx]">
            <u-image shape="circle" src="/static/images/user/default_avatar.png" width="100rpx"
              height="100rpx"></u-image>
          </view>
          <view class="ml-[20rpx]">
            <view class="flex flex-row items-center">
              <view class="font-bold text-2xl text-content">点击登录</view>
            </view>
          </view>
        </view>
      </view>
      <view class="flex flex-row justify-between mx-[30rpx] px-[50rpx] py-[30rpx]">
        <view class="flex flex-col items-center" @click="navTo('/packagesA/pages/myPullTheWire/myPullTheWire')">
          <view class="font-bold text-2xl">{{ theUserInfo.qianxian_count || 0 }}</view>
          <view class="text-content text-xs mt-[15rpx]">我的牵线</view>
        </view>
        <view class="flex flex-col items-center" @click="navTo('/packages/pages/user/my-collection')">
          <view class="font-bold text-2xl">{{ theUserInfo.collection_count || 0 }}</view>
          <view class="text-content text-xs mt-[15rpx]">我的收藏</view>
        </view>
        <view class="flex flex-col items-center" @click="navTo('/packages/pages/user/my-iSeeWho')">
          <view class="font-bold text-2xl">{{ theUserInfo.my_foot_count || 0 }}</view>
          <view class="text-content text-xs mt-[15rpx]">我看过谁</view>
        </view>
        <view class="flex flex-col items-center" @click="navTo('/packages/pages/user/my-whoSeeI')">
          <view class="font-bold text-2xl">{{ theUserInfo.foot_my_count || 0 }}</view>
          <view class="text-content text-xs mt-[15rpx]">谁看过我</view>
        </view>
      </view>
    </view>

    <view class="vip bg-white rounded-[30rpx] mx-[30rpx] px-[30rpx] py-[30rpx] flex flex-row justify-between">
      <view>
        <view class="vipText font-bold text-2xl">{{ theUserInfo.is_vip == 0 ? 'VIP会员未开通' : '尊贵' +
          theUserInfo.vip_title + '会员' }}</view>
        <view class="mt-[10rpx] text-block text-xs">{{ theUserInfo.is_vip == 0 ? '开通VIP会员可享受尊贵服务哦' : '升级会员享受更多服务' }}
        </view>
      </view>
      <view class="mt-[20rpx] ">
        <u-button style="background-color: #87592f;color: #fff;" shape="circle"
          @click="navTo('/packages/pages/user/vip')">{{ theUserInfo.is_vip == 0 ?
            '立即开通' : '立即升级' }}</u-button>
      </view>
    </view>
    <view class="bg-white flex flex-row justify-between mx-[30rpx] px-[30rpx] py-[30rpx] rounded-[40rpx] mt-[40rpx]">
      <view class="flex flex-col items-center" @click="navTo('/packagesA/pages/pullTheWirePackage/pullTheWirePackage')">
        <u-image width="80rpx" height="80rpx" :src="`${$domain}/static/icons/user/userCenter/hnqx.png`"
          mode="heightFix"></u-image>
        <view class="mt-[20rpx]">红娘牵线</view>
      </view>
      <view class="flex flex-col items-center" @click="navTo('/packagesA/pages/custom/custom')">
        <u-image width="80rpx" height="80rpx" :src="`${$domain}/static/icons/user/userCenter/srdz.png`"
          mode="heightFix"></u-image>
        <view class="mt-[20rpx]">私人定制</view>
      </view>
      <view class="flex flex-col items-center" @click="navTo('/packagesA/pages/overhead/overhead')">
        <u-image width="80rpx" height="80rpx" :src="`${$domain}/static/icons/user/userCenter/wyzd.png`"
          mode="heightFix"></u-image>
        <view class="mt-[20rpx]">我要置顶</view>
      </view>
      <view class="flex flex-col items-center" @click="navTo('/packagesA/pages/dynamicAdd/dynamicAdd')">
        <u-image width="80rpx" height="80rpx" :src="`${$domain}/static/icons/user/userCenter/fbdt.png`"
          mode="heightFix"></u-image>
        <view class="mt-[20rpx]">发布动态</view>
      </view>
    </view>
    <view class="bg-white flex flex-col mx-[30rpx] px-[30rpx] py-[30rpx] rounded-[40rpx] mt-[40rpx]">
      <view class="cradTitle">我的服务</view>
      <view class="flex flex-wrap " style="gap: 36rpx;">
        <!-- 我的账户 -->
        <view @click="navTo('/packages/pages/user/my-account')" class="flex flex-col items-center"
          style="width: 130rpx; height: 130rpx;">
          <u-image width="80rpx" height="80rpx" :src="`${$domain}/static/icons/user/userCenter/wdzh.png`"
            mode="aspectFill"></u-image>
          <view class="font-bold text-xs mt-[10rpx]">我的账户</view>
        </view>

        <!-- 专属红娘 -->
        <view @click="navTo('/pages/customer_service/customer_service')" class="flex flex-col items-center"
          style="width: 130rpx; height: 130rpx;">
          <u-image width="80rpx" height="80rpx" :src="`${$domain}/static/icons/user/userCenter/zshn.png`"
            mode="aspectFill"></u-image>
          <view class="font-bold text-xs mt-[10rpx]">专属红娘</view>
        </view>

        <!-- 咨询师中心 新增-->
        <view @click="navTo('/packages/pages/counselor/index')" class="flex flex-col items-center"
          style="width: 130rpx; height: 130rpx;">
          <u-image width="80rpx" height="80rpx" :src="`${$domain}/static/icons/user/userCenter/zxszx.png`"
            mode="aspectFill"></u-image>
          <view class="font-bold text-xs mt-[10rpx]">咨询师中心</view>
        </view>

        <!-- 推广中心 新增-->
        <view @click="navTo('/packages/pages/promotion/index')" class="flex flex-col items-center"
          style="width: 130rpx; height: 130rpx;">
          <u-image width="80rpx" height="80rpx" :src="`${$domain}/static/icons/user/userCenter/tgzx.png`"
            mode="aspectFill"></u-image>
          <view class="font-bold text-xs mt-[10rpx]">推广中心</view>
        </view>

        <!-- 诚信认证 -->
        <view @click="navTo('/packages/pages/user/integrity-certification')" class="flex flex-col items-center"
          style="width: 130rpx; height: 130rpx;">
          <u-image width="80rpx" height="80rpx" :src="`${$domain}/static/icons/user/userCenter/cxrz.png`"
            mode="aspectFill"></u-image>
          <view class="font-bold text-xs mt-[10rpx]">诚信认证</view>
        </view>

        <!-- 相册中心 -->
        <view @click="navTo('/packagesA/pages/album/album')" class="flex flex-col items-center"
          style="width: 130rpx; height: 130rpx;">
          <u-image width="80rpx" height="80rpx" :src="`${$domain}/static/icons/user/userCenter/xczx.png`"
            mode="aspectFill"></u-image>
          <view class="font-bold text-xs mt-[10rpx]">相册中心</view>
        </view>
        <!-- <view @click="navTo('/packages/pages/user/my-write-off')" class="flex flex-row justify-between items-center py-[40rpx]" style="border-bottom: solid 1px #eeeeee;">
        <view class="flex flex-row items-center">
          <u-image width="35rpx" height="35rpx" :src="`${$domain}/static/icons/user/wyhx.svg`"></u-image>
          <view class="font-bold ml-[20rpx]">我要核销</view>
        </view>
        <view><u-icon name="arrow-right"></u-icon></view>
      </view> -->
        <!-- 我的活动 -->
        <view @click="navTo('/packages/pages/user/my-registration')" class="flex flex-col items-center"
          style="width: 130rpx; height: 130rpx;">
          <u-image width="80rpx" height="80rpx" :src="`${$domain}/static/icons/user/userCenter/wdhd.png`"
            mode="aspectFill"></u-image>
          <view class="font-bold text-xs mt-[10rpx]">我的活动</view>
        </view>

        <!-- 我的动态 -->
        <view @click="navTo('/packagesA/pages/myDynamic/myDynamic')" class="flex flex-col items-center"
          style="width: 130rpx; height: 130rpx;">
          <u-image width="80rpx" height="80rpx" :src="`${$domain}/static/icons/user/userCenter/wddt.png`"
            mode="aspectFill"></u-image>
          <view class="font-bold text-xs mt-[10rpx]">我的动态</view>
        </view>

        <!-- 成为合作商 新增-->
        <view @click="navTo('/packages/pages/partner/submit')" class="flex flex-col items-center"
          style="width: 130rpx; height: 130rpx;">
          <u-image width="80rpx" height="80rpx" :src="`${$domain}/static/icons/user/userCenter/cwhzs.png`"
            mode="aspectFill"></u-image>
          <view class="font-bold text-xs mt-[10rpx]">成为合作商</view>
        </view>

        <!-- 联系我们 -->
        <view @click="navTo('/pages/customer_service/customer_service')" class="flex flex-col items-center"
          style="width: 130rpx; height: 130rpx;">
          <u-image width="80rpx" height="80rpx" :src="`${$domain}/static/icons/user/userCenter/lxwm.png`"
            mode="aspectFill"></u-image>
          <view class="font-bold text-xs mt-[10rpx]">联系我们</view>
        </view>


      </view>


    </view>

    <u-button class="mt-[30rpx] mx-[30rpx]" style="color: #000;border: none;" :hair-line="false"
      @click="showLogoutModal = true">退出登录</u-button>

    <!-- 退出登录弹窗 -->
    <view v-if="showLogoutModal" class="logout-modal" @click="showLogoutModal = false">
      <view class="modal-content" @click.stop>
        <view class="modal-title">退出登录提示</view>
        <view class="modal-divider"></view>
        <view class="modal-message">确定要退出登录吗？</view>
        <view class="modal-buttons">
          <view class="modal-btn cancel-btn" @click="showLogoutModal = false">取消</view>
          <view class="modal-btn confirm-btn" @click="confirmLogout">确定</view>
        </view>
      </view>
    </view>
    <view v-if="false" v-for="(item, index) in state.pages" :key="index">
      <template v-if="item.name == 'user-info'">
        <w-user-info :pageMeta="state.meta" :content="item.content" :styles="item.styles" :user="userInfo"
          :is-login="isLogin" />
      </template>
      <template v-if="item.name == 'my-service' && false">
        <w-my-service :content="item.content" :styles="item.styles" />
      </template>
      <template v-if="item.name == 'user-banner' && false">
        <w-user-banner :content="item.content" :styles="item.styles" />
      </template>
    </view>
  </view>
  <tabbar />

</template>

<script>
import { getDecorate } from '@/api/shop'
import { useUserStore } from '@/stores/user'
import PageBg from "@/components/page-bg/page-bg.vue";
import { getUserInfoApi } from "@/api/new";
import { useRouter } from "uniapp-router-next";

export default {
  name: 'UserPage',
  components: {
    PageBg
  },
  data() {
    return {
      navBg: 'rgba(255,255,255,0)',
      titleColor: '#fff',
      theUserInfo: {},
      state: {
        meta: [],
        pages: []
      },
      userStore: null,
      router: null,
      showLogoutModal: false
    }
  },
  computed: {
    userInfo() {
      return this.userStore ? this.userStore.userInfo : null;
    },
    isLogin() {
      return this.userStore ? this.userStore.isLogin : false;
    }
  },
  onPageScroll(event) {
    this.navBg = event.scrollTop > 10 ? '#fff' : 'rgba(255,255,255,0)';
    this.titleColor = event.scrollTop > 10 ? '#111' : '#fff';
  },
  onShow() {
    if (this.isLogin) {
      this.getTheUserInfo();
    }
  },
  async onLoad() {
    this.userStore = useUserStore();
    this.router = useRouter();
    await this.getData();
  },
  methods: {
    async getTheUserInfo() {
      try {
        this.theUserInfo = await getUserInfoApi({});
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },
    confirmLogout() {
      this.showLogoutModal = false;
      this.userStore.logout();
      this.router.redirectTo('/pages/login/login');
    },
    async getData() {
      try {
        const data = await getDecorate({ id: 2 });
        this.state.meta = JSON.parse(data.meta);
        this.state.pages = JSON.parse(data.data);
        uni.setNavigationBarTitle({
          title: this.state.meta[0].content.title
        });
      } catch (error) {
        console.error('获取页面装饰数据失败:', error);
      }
    },
    navTo(url) {
      uni.navigateTo({ url });
    }
  }
}
</script>

<style lang="scss" scoped>
.userTop {
  background: url('@/static/new/userTop.png') no-repeat;
  background-size: cover;

}

page {
  // 背景颜色渐变 从上到下
  background: linear-gradient(to bottom, #f7f6f0, #f7f7f7);
}

.vip {
  background: url('@/static/new/vipBg.png') no-repeat;
  background-size: cover;
}

.vipText {
  color: #87592f;
}

.cradTitle {
  font-size: 34rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}

.avatar {
  position: relative;

  .xbImg {
    position: absolute;
    bottom: 5px;
    right: 5px;
  }
}

/* 退出登录弹窗 */
.logout-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content {
  width: 600rpx;
  background: #fff;
  border-radius: 32rpx;
  padding: 60rpx 40rpx 40rpx;
}

.modal-title {
  font-size: 40rpx;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin-bottom: 40rpx;
}

.modal-divider {
  width: 100%;
  height: 1rpx;
  background: #f0f0f0;
  margin-bottom: 60rpx;
}

.modal-message {
  font-size: 32rpx;
  color: #333;
  text-align: center;
  line-height: 48rpx;
  margin-bottom: 80rpx;
}

.modal-buttons {
  display: flex;
  gap: 20rpx;
}

.modal-btn {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 44rpx;
}

.cancel-btn {
  background: #f5f5f5;
  color: #999;
}

.confirm-btn {
  background: linear-gradient(90deg, #ff8fe5, #ff5acf);
  color: #fff;
  box-shadow: 0 8rpx 24rpx rgba(255, 90, 207, 0.3);
}
</style>